@codemirror/commands

What is @codemirror/commands?

@codemirror/commands is a package that provides a collection of commands for the CodeMirror code editor. These commands are used to manipulate the editor's content, navigate through the text, and perform various editing operations. The package is designed to be used with the CodeMirror 6 framework.

What are @codemirror/commands's main functionalities?

Basic Editing Commands

This feature includes basic editing commands such as inserting a newline and deleting a character forward. The code sample demonstrates how to bind these commands to specific keys in a CodeMirror editor instance.

import { insertNewline, deleteCharForward } from '@codemirror/commands';

// Example usage in a CodeMirror setup
const editor = new EditorView({
  state: EditorState.create({
    doc: 'Hello, world!',
    extensions: [
      keymap.of([{
        key: 'Enter', run: insertNewline
      }, {
        key: 'Delete', run: deleteCharForward
      }])
    ]
  }),
  parent: document.body
});

Selection Commands

This feature includes commands for selecting text, such as selecting all text or selecting the current line. The code sample shows how to bind these commands to specific key combinations in a CodeMirror editor instance.

import { selectAll, selectLine } from '@codemirror/commands';

// Example usage in a CodeMirror setup
const editor = new EditorView({
  state: EditorState.create({
    doc: 'Hello, world!',
    extensions: [
      keymap.of([{
        key: 'Ctrl-a', run: selectAll
      }, {
        key: 'Ctrl-l', run: selectLine
      }])
    ]
  }),
  parent: document.body
});

Navigation Commands

This feature includes navigation commands such as moving the cursor left or right by one character. The code sample demonstrates how to bind these commands to the arrow keys in a CodeMirror editor instance.

import { cursorCharLeft, cursorCharRight } from '@codemirror/commands';

// Example usage in a CodeMirror setup
const editor = new EditorView({
  state: EditorState.create({
    doc: 'Hello, world!',
    extensions: [
      keymap.of([{
        key: 'ArrowLeft', run: cursorCharLeft
      }, {
        key: 'ArrowRight', run: cursorCharRight
      }])
    ]
  }),
  parent: document.body
});

Other packages similar to @codemirror/commands

monaco-editor

Monaco Editor is the code editor that powers Visual Studio Code. It provides a rich set of commands for editing, navigating, and managing code. Compared to @codemirror/commands, Monaco Editor offers a more comprehensive and integrated development experience, especially for larger projects.

ace-builds

Ace is a standalone code editor written in JavaScript. It provides a wide range of commands for code editing and navigation. While @codemirror/commands is designed to work with the CodeMirror 6 framework, Ace is a self-contained editor with its own set of features and commands.

codemirror

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It provides a variety of commands for text editing and navigation. The original CodeMirror (version 5) has a different API and architecture compared to CodeMirror 6 and its @codemirror/commands package.

README

@codemirror/commands

[ WEBSITE | DOCS | ISSUES | FORUM | CHANGELOG ]

This package implements a collection of editing commands for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Changelog

6.7.1 (2024-10-21)

Bug fixes

Change toggleBlockCommentByLine to not affect lines with the selection end right at their start.